<template>
    <div class="body">
        <van-sticky>
            <van-search
            v-model="search"
            shape="round"
            :background="color"
            input-align="center"
            placeholder="搜索商品"
            @search="onChangeValue1"
            />
        </van-sticky>
        <van-dropdown-menu :active-color="color">
            <van-dropdown-item v-model="value1" :options="option1" @change="onChangeValue1"/>
            <van-dropdown-item id="item" title="筛选">
                    <van-cell :title="switchTitle1">
                        <van-switch
                            slot="right-icon"
                            size="20px"
                            style="height: 20px"
                            :active-color="color" 
                            v-model="switch1"
                            @input="onSwitchChange"
                        />
                        </van-cell>
                        <van-cell :title="switchTitle2">
                        <van-switch
                            slot="right-icon"
                            size="20px"
                            style="height: 20px"
                            :active-color="color" 
                            v-model="switch2"
                            @input="onSwitchChange"
                        />
                        </van-cell>
                        <van-cell :title="switchTitle3">
                        <van-switch
                            slot="right-icon"
                            size="20px"
                            style="height: 20px"
                            :active-color="color" 
                            v-model="switch3"
                            @input="onSwitchChange"
                        />
                        </van-cell>
            </van-dropdown-item>
            <!-- <van-dropdown-item v-model="value3" :options="option3" /> -->
        </van-dropdown-menu>
        <template v-if="data.length">
            <van-card
            v-for="(item,index) of data" :key="index"
            :num="`已售${item.sales}件`"
            :price="item.is_activity?item.act_price:$store.getters.wxUserInfo.is_believe?item.price:item.ot_price"
            :desc="item.info"
            :title="item.name"
            :thumb="item.image"
            :thumb-link="env == 'development'?'/#/goodInfo?id='+item.id:'/sxplat/#/goodInfo?id='+item.id"
            />
        </template>
        <van-empty v-else image="search" description="暂无相关商品" />
    </div>
</template>
<script>
import {search} from '../ajax'
import {Toast} from 'vant'
export default{
    data() {
        return {
            color:"#3DCEB9",
            switchTitle1: '新品',
            switchTitle2: '热销',
            switchTitle3: '活动价',
            switch1:false,
            switch2:false,
            switch3:false,
            option1: [
            { text: '默认排序', value: 0 },
            { text: '销量从低到高', value: 1 },
            { text: '销量从高到低', value: 2 },
            { text: '价格从低到高', value: 3 },
            { text: '价格从高到低', value: 4 }
            ],
            value1: 0,
            data:[],
            search:'',
            priceOrder:'',
            is_hot:'',
            salesOrder:'',
            is_new:'',
            cate_id:'',
            env: null,
            page:1,
            searchParams:{}
        }
    },
    created(){
        this.env = process.env.NODE_ENV
        if(this.$route.query.search){
            this.search = this.$route.query.search
        }
        this.onSearch();
    },
    methods:{
        onChangeValue1(value){
            let data = {}
            switch(value){
                case 1:
                    data.salesOrder = "asc"
                    break;
                case 2:
                   data.salesOrder = "desc"
                    break;
                case 3:
                    data.priceOrder = "asc"
                    break;
                case 4:
                    data.priceOrder = "desc"
                    break;
            }
            this.searchParams = data;
            this.onSearch(data);
        },
        onSwitchChange(value){
            this.onSearch(this.searchParams);
        },
        onSearch(e){
            if(!e) e = {};
            if(!e.priceOrder) e.priceOrder = '';
            if(!e.salesOrder) e.salesOrder = '';
            e.text = this.search;
            e.is_new = this.switch1?1:'';
            e.is_hot = this.switch2?1:'';
            e.is_activity = this.switch3?1:'';
            e.admin_id = this.$store.getters.admin_id;
            e.center_ids = (this.$store.getters.wxUserInfo.center_ids).toString();
            e.page = this.page;
            if(!e.text){
                Toast('请输入搜索内容');
                return;
            }
            // const data = {
            //     admin_id:this.$store.getters.admin_id,
            //     text:e,
            //     priceOrder,
            //     is_hot,
            //     salesOrder,
            //     is_new,
            //     cate_id
            // }
            search(e).then(res=>{
                // console.log(res);
                this.data = res;
            })
        }
    }
}
</script>
<style lang="scss" scoped>
$green:#3DCEB9;
.body{
    >>> .van-cell__title{
        font-size: 1rem;
        font-weight: 500;
    }
}
</style>